<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>前台商品页</title>
    <!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="${css}/bootstrap.css" type="text/css" rel="stylesheet" media="all">
    <link href="${css}/style2.css" type="text/css" rel="stylesheet" media="all">
    <link href="${css}/form.css" rel="stylesheet" type="text/css" media="all" />
    <script src="${js}/min/jquery.min.js"></script>
    <script type="text/javascript" src="${js}/bootstrap-3.1.1.min.js"></script>
    <script src="${js}/simpleCart.min.js"> </script>
    <script src="${root}/resource/layer/layer.js"></script>
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <script type="text/javascript" src="${js}/jquery.jscrollpane.min.js"></script>
    <script src="${js}/imagezoom.js"></script>
    <script defer src="${js}/jquery.flexslider.js"></script>
    <link rel="stylesheet" href="${css}/flexslider.css" type="text/css" media="screen" />
    <script>
        // Can also be used with $(document).ready()
        $(window).load(function() {
            $('.flexslider').flexslider({
                animation: "slide",
                controlNav: "thumbnails"
            });
        });
    </script>
    <script type="text/javascript" id="sourcecode">
        $(function()
        {
            $('.scroll-pane').jScrollPane();
        });
    </script>
    <script type="text/javascript" src="${js}/jquery.mousewheel.js"></script>
    <style>
        #overlay {
            background: #000;
            filter: alpha(opacity=50); /* IE的透明度 */
            opacity: 0.5;  /* 透明度 */
            display: none;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            z-index: 7; /* 此处的图层要大于页面 */
            display:none;
        }
    </style>
</head>
<body>
<%--消息--%>
<div id="div_3" style="position: absolute; display: none;z-index: 8;">
    <h2 id="message"></h2>
</div>
<%--消息--%>

<c:if test="${empty userLogin}">
    <%--蒙层--%>
    <div id="overlay">
    </div>
    <%--蒙层--%>

    <%--登录--%>
    <div id="div_1" style="position: fixed; display: none; z-index: 8;width: 250px;background-color: white;">
        <div style="width:100%; background-color: papayawhip;">
            <h3 class="text-center">用户登录页面</h3>
        </div>
        <div style="margin: 10px 10px;">
            <form  id="Login">
                账号：<input type="text" name="username" id="username"><br/>
                <p id="usernameError" ></p>
                密码：<input type="text" name="password" id="password"><br/>
                <p id="passwordError"></p>
                验证码：<input type="text" size="4" name="code" id="code"><img id="codeImg" src="${root}/user/front/captcha" height="30" width="60" onclick="this.src=this.src+'?'"/><br/>
                <span id="codeError"></span>
                <button class="btn-info" type="button" id="btn1">登录</button><br/>
                <p id="loginError" class="text-center"></p>
                <p>注册用新的户？<a id="toReg" class="text-danger">点击这里</a></p>
            </form>
        </div>
    </div>
    <%--登录--%>

    <%--注册--%>
    <div id="div_2" style="position: fixed; display: none; z-index: 101;width: 200px;background-color: white;">
        <div style="width:100%; background-color: papayawhip;">
            <h3 class="text-center">用户注册页面</h3>
        </div>
        <div style="margin: 10px 10px;">
            <form   id="reg" style="padding: 5px 5px">
                账号：<input type="text" name="username" id="username1"><br/>
                <p id="username1Error"></p>
                密码：<input type="text" name="password" id="password1"><br/>
                <p id="password1Error"></p>
                确认密码：<input type="text" id="password2" id="password2"><br/>
                <p id="password2Error"></p>
                真实姓名：<input type="text" name="realname" id="realname"><br/>
                <p id="realnameError"></p>
                电话：<input type="text" name="phone" id="phone"><br/>
                <p id="phoneError"></p>
                地址：<input type="text" name="address" id="address"><br/>
                <p id="addressError"></p>
                邮箱：<input type="text" name="email" id="email" ><button class="btn-info" id="btn3" type="button">发送验证码</button><br/>
                <p id="emailError"></p>
                验证码：<input type="text" size="6" name="code" id="code2">
                <p id="emailCodeError"></p>
                <button class="btn-info" type="button" id="btn2">确认</button><br/>
                <p id="regError"></p>
            </form>
        </div>
    </div>
    <%--注册--%>
</c:if>

<script src="${js}/mc.js"></script>
<script>
    $(function () {
        $("#btn2").click(function () {
            if($("#password1").val()==$("#password2").val()){
                $.ajax({
                    url:"${root}/user/front/userUpdate",
                    type:"post",
                    dataType:"json",
                    data:$("#reg").serialize(),
                    success:function (response) {
                        console.log(response);
                        if (response.result==200){
                            hide2();
                            hideReg();
                            hideOverlay();
                            showInfo();
                            $("#message").text("注册成功！");
                            setTimeout(function () {
                                hideInfo();
                                $("#message").text("");
                                window.location.reload();
                            },3000);
                        }else if(response.result==301){
                            $("#username1").val(response.user.username);
                            $("#password1").val(response.user.password);
                            $("#realname").val(response.user.realname);
                            $("#phone").val(response.user.phone);
                            $("#address").val(response.user.address);
                            $("#email").val(response.user.email);
                            $("#regError").text("没有登录成功");
                            console.log("没有存进入");
                        }else if(response.result==401){

                            $("#username1Error").text(response.usernameError);
                            $("#password1Error").text(response.passwordError);
                            $("#realnameError").text(response.realnameError);
                            $("#phoneError").text(response.phoneError);
                            $("#addressError").text(response.addressError);
                            $("#emailError").text(response.emailError);

                            $("#username1").val(response.user.username);
                            $("#password1").val(response.user.password);
                            $("#password2").val(response.user.password);
                            $("#realname").val(response.user.realname);
                            $("#phone").val(response.user.phone);
                            $("#address").val(response.user.phone);
                            $("#email").val(response.user.email);
                            console.log("401错误，有空值");
                        }else if(response.result==501){
                            $("#emailCodeError").text("验证码错误");
                        }

                    },
                    error:function () {
                        $("#codeImg").click();
                        console.log("难受！")
                    }
                });
            }else{
                $("#password2Error").text("两次密码不相同！");
            }
        });

        $("#btn3").click(function () {
            let email = $("#email").val();
            $.ajax({
                url:"${root}/user/front/email",
                type: "post",
                data:{"email":email},
                dataType: "json",
                success:function (response) {
                    if (response.result==200){
                        $("#emailError").text("发送成功，请立即输入");
                    }else{
                        $("#emailError").text("邮箱不存在");
                    }
                }
            });
            $("#btn3").attr({"disabled":"disabled"});
            let o1 = new Date().getTime();
            let seconds = 5;
            let id = setInterval(function () {
                let o2 = new Date().getTime();
                let time = o2 - o1;
                console.log(seconds);
                $("#btn3").text("还剩"+(seconds--)+"秒,可以再次请求验证码");
                if (time>=5000){
                    $("#btn3").removeAttr("disabled");
                    $("#btn3").text("发送验证码");
                    clearInterval(id);
                }
            },1000);
        });


        //出现登录界面
        $("#login-div").click(function () {
            showOverlay();
            adjust("#div_1");
            showLogin();
        });

        //出现注册界面
        $("#toReg").click(function () {
            hideLogin();
            adjust("#div_2");
            showReg();
        });

        //点击蒙层登录或者退出界面消失
        $("#overlay").click(function () {
            hideLogin();
            hideReg();
            hideOverlay();
            hide1();
            hide2();
        });


        $("#username").change(function () {
            $("#usernameError").text("");
            $("#loginError").text("");
        });

        $("#password").change(function () {
            $("#passwordError").text("");
            $("#loginError").text("");
        });

        $("#code").change(function () {
            $("#codeError").text("");
            $("#loginError").text("");
        });

        $("#btn1").click(function () {
            $.ajax({
                url:"${root}/user/front/userLogin",
                type:"post",
                dataType:"json",
                data:$("#Login").serialize(),
                success:function (response) {
                    if (response.result==200){
                        hide1();
                        hideLogin();
                        hideOverlay();
                        showInfo();
                        $("#message").text("登录成功！");
                        setTimeout(function () {
                            hideInfo();
                            $("#message").text("");
                            window.location.reload();
                        },3000);
                    }else if(response.result==301){

                        $("#username").val(response.user.username);
                        $("#password").val(response.user.password);
                        $("#loginError").text(response.LoginError);
                        $("#codeImg").click();
                        layer.msg('<p style="color:black">登录失败</p>',{time:700,icon:5,shift:6},function () {
                        });
                    }else if(response.result==401){
                        $("#usernameError").text(response.usernameError);
                        $("#passwordError").text(response.passwordError);
                        $("#codeImg").click();
                        layer.msg('<p style="color:black">登录失败</p>',{time:700,icon:5,shift:6},function () {
                        });
                    }else if(response.result==402){
                        $("#codeError").text(response.codeError);
                        $("#codeImg").click();
                        layer.msg('<p style="color:black">登录失败</p>',{time:1000,icon:5,shift:6},function () {
                        });
                    }

                },
                error:function () {
                    $("#codeImg").click();
                    console.log("难受！")
                }
            })
        });
    });
</script>
<%--Login--%>
<!--header-->
<div class="header">
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <h1 class="navbar-brand"><a  href="#">My-BookStore</a></h1>
            </div>
            <!--navbar-header-->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="${root}/user/front/indexView" class="active">首页</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">类型<b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column">
                            <li><a class="list" href="${root}/book/front/list">全部</a></li>
                            <c:forEach items="${categorys}" var="category">
                                <li><a class="list" href="${root}/book/front/list?cid=${category.cid}" name="${category.cid}">${category.cname}</a></li>
                            </c:forEach>
                        </ul>
                    </li>
                    <li class="dropdown grid">
                        <a href="${root}/user/front/userinfo" class="list1" >个人中心</a>
                    </li>
                    <li class="dropdown grid">
                        <a href="${root}/user/front/cart" class="list1">购物车</a>
                    </li>
                    <li class="dropdown grid">
                        <a href="${root}/orders/user/orderList" class="list1">订单</a>
                    </li>
                </ul>
                <!--/.navbar-collapse-->
            </div>
            <!--//navbar-header-->
        </nav>
        <div class="header-info">
            <div class="header-right login" id="login-div">
                <a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a>
                <c:if test="${not empty userLogin}">
                    <div id="loginBox">
                        <form id="loginForm" style="padding: 10px 10px">
                            <h4>用户名:${userLogin.username}</h4>
                            <button class="btn btn-info"><a href="#">个人中心</a></button><br/>
                            <button id="btn5" class="btn btn-danger">退出登录</button><br/>
                        </form>
                    </div>
                </c:if>
            </div>
            <div class="header-right cart" id="cart-div">
                <a href="${root}/user/front/cart"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a>
            </div>
        </div>
        <script>
            $(function () {
                $("#btn5").click(function () {
                    $.ajax({
                        url:"${root}/user/front/return",
                        type:"get",
                        success:function (response) {
                            if (response.result==200){
                                showInfo();
                                $("#message").text("退出成功！");
                                setTimeout(function () {
                                    hideInfo();
                                    $("#message").text("");
                                    window.location.reload();
                                },3000);
                            }
                        }
                    })
                });
            })
        </script>
    </div>
</div>
<!--//header-->
<!--cart-items-->
<div class="cart-items">
    <div class="container">
        <c:if test="${cart.size==0||cart==null}">
            <h2>My Shopping Cart(0)</h2>
            您的购物车是空的！点击<a href="${root}/book/front/list">这里</a>去购物
        </c:if>
        <c:if test="${cart.size!=0&&cart!=null}">
            <h2>My Shopping Cart(<span id="head_num">${cart.size}</span>)</h2>
            <c:forEach var="data" items="${cart.map}">
                <script>
                    $(document).ready(function(c) {
                        $('.${data.key}').on('click', function(c){
                            $('.${data.key}-header').fadeOut('slow', function(c){
                                $('.${data.key}-header').remove();
                                $.ajax({
                                    url:"${root}/shop/remove",
                                    data:{"bid":"${data.key}"},
                                    type:"post",
                                    dataType:"json",
                                    success: function (response) {
                                        if (response.code==200){
                                            $("#Total").text(response.data.total);
                                            $("#head_num").text(response.data.size)
                                            if (response.data.size==0){
                                                window.location.reload();
                                            }
                                        }
                                    }
                                })
                            });
                        });

                        $('.subBtn-${data.key}').click(function () {
                            if ($(this).next().val()>1){
                                let value =  parseInt($(this).next().val()-1);
                                $(this).next().val(value);
                                let number = $(this).next().val();
                                $.ajax({
                                    url:"${root}/shop/changeNum",
                                    data:{"bid":"${data.key}","num":number},
                                    type:"post",
                                    dataType:"json",
                                    success: function (response) {
                                        if (response.code==200){
                                            let val = parseFloat(number*${data.value.book.bprice});
                                            $("#span-${data.key}").text(val);
                                            $("#Total").text(response.data.total);
                                        }
                                    }
                                })
                            }
                        });
                        $('.addBtn-${data.key}').click(function () {
                            let value = parseInt($(this).prev().val())+1;
                            $(this).prev().val(value);
                            let number = $(this).prev().val();
                            $.ajax({
                                url:"${root}/shop/changeNum",
                                data:{"bid":"${data.key}","num":number},
                                type:"post",
                                dataType:"json",
                                success: function (response) {
                                    if (response.code==200){
                                        let val = parseFloat(number*${data.value.book.bprice});
                                        $("#span-${data.key}").text(val);
                                        $("#Total").text(response.data.total);
                                    }
                                }
                            })
                        });
                        $('.input-${data.key}').change(function () {
                            let number = $(this).val();
                            if (number>=1){
                                $.ajax({
                                    url:"${root}/shop/changeNum",
                                    data:{"bid":"${data.key}","num":number},
                                    type:"post",
                                    dataType:"json",
                                    success: function (response) {
                                        if (response.code==200){
                                            let val = parseFloat(number*${data.value.book.bprice});
                                            $("#span-${data.key}").text(val);
                                            $("#Total").text(response.data.total);
                                        }
                                    }
                                })
                            }else{
                                $(this).val(1);
                                $.ajax({
                                    url:"${root}/shop/changeNum",
                                    data:{"bid":"${data.key}","num":1},
                                    type:"post",
                                    dataType:"json",
                                    success: function (response) {
                                        if (response.code==200){
                                            let val = parseFloat(1*${data.value.book.bprice});
                                            $("#span-${data.key}").text(val);
                                            $("#Total").text(response.data.total);
                                        }
                                    }
                                })
                            }
                        });
                    });
                </script>
                <div class="cart-header ${data.key}-header">
                    <div class="close ${data.key}"> </div>
                    <div class="cart-sec simpleCart_shelfItem">
                        <div class="cart-item cyc">
                            <img src="${images}/${data.value.book.photo}" class="img-responsive" alt="">
                        </div>
                        <div class="cart-item-info">
                            <h3><a> 书名：${data.value.book.title} </a><span>购买物品信息:</span></h3>
                            <ul class="qty">
                                <li><p>商品单价：</p></li>
                                <li><p>$${data.value.book.bprice}</p></li>
                            </ul>
                            <ul class="qty">
                                <li><p>商品数量：</p></li>
                                <li><p><button class="subBtn-${data.key}">-</button><input size="5" type="text" name="num" value="${data.value.num}" class="input-${data.key}"><button class="addBtn-${data.key}">+</button></p></li>
                            </ul>
                            <div class="delivery">
                                <p>小结 ：$<span id="span-${data.key}"><fmt:formatNumber value="${data.value.book.bprice*data.value.num}" type="number" maxFractionDigits="2"/></span> </p>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </c:forEach>
            <div style="width:1200px;padding: 10px 10px;">
                <div style="margin: 10px 10px;float: left;">
                    <span class="text-big text-blue">总额:</span>$
                    <span class="text-big text-blue" id="Total">${cart.total}</span>
                </div>
                <div style="float: left;">
                    <button type="button" class="btn-danger" id="btn-clear">清空</button>
                </div>
                <div style="float: left;">
                    <button type="button" class="btn-warning"><a href="${root}/user/front/order">付款</a></button>
                </div>
            </div>
            <script>
                $(function () {
                    $("#btn-clear").click(function () {
                        $.ajax({
                            url:"${root}/shop/clear",
                            type:"get",
                            dataType:"json",
                            success:function (response) {
                                if (response.code==200){
                                    $('.cart-header').fadeOut('slow', function(c){
                                        $('.cart-header').remove();
                                    });
                                    window.location.reload();
                                }
                            }
                        });
                    })
                })
            </script>
        </c:if>
    </div>
</div>
<!--//checkout-->
<!--footer-->
<div class="footer">
    <div class="container">
        <div class="footer-grids">
            <div class="col-md-2 footer-grid">
                <h4>公司</h4>
                <ul>
                    <li><a href="#">工作地点</a></li>
                    <li><a href="#">团队</a></li>
                    <li><a href="#">事件</a></li>
                    <li><a href="#">经销商</a></li>
                </ul>
            </div>
            <div class="col-md-2 footer-grid">
                <h4>业务</h4>
                <ul>
                    <li><a href="#">赞助</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">担保</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                </ul>
            </div>
            <div class="col-md-3 footer-grid">
                <h4>订单 & 退货</h4>
                <ul>
                    <li><a href="#">订单状态</a></li>
                    <li><a href="#">配送方式</a></li>
                    <li><a href="#">退换货说明</a></li>
                    <li><a href="#">电子卡片</a></li>
                </ul>
            </div>
            <div class="col-md-2 footer-grid">
                <h4>法律</h4>
                <ul>
                    <li><a href="#">隐私</a></li>
                    <li><a href="#">条款和条件</a></li>
                    <li><a href="#">社会责任</a></li>
                </ul>
            </div>
            <div class="col-md-3 footer-grid icons">
                <h4>与我们联系</h4>
                <ul>
                    <li><a href="#"><img src="${images}/i1.jpg" alt=""/>在Wechat上关注我们</a></li>
                    <li><a href="#"><img src="${images}/i2.jpg" alt=""/>在微博上关注我们</a></li>
                    <li><a href="#"><img src="${images}/i3.jpg" alt=""/>在QQ上关注我们</a></li>
                </ul>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<div class="footer-bottom">
    <div class="container">
        <p>Copyright &copy; 2021.Company name MINE.More Software <a href="http://www.1127009780@qq.com/" target="_blank" title="fcx的Home">fcx的Home</a>.</p>
    </div>
</div>
</body>
</html>
